<%--
  Created by IntelliJ IDEA.
  User: LiuShihao
  Date: 2020/3/22
  Time: 2:05 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts.min.js"></script>
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.js"></script>
    <title>年营业额统计</title>
</head>
<body>
<nav class="navbar-inverse">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <a class="navbar-brand" href="#">宾馆客房管理系统 : </a>
        </div>
        <div class="collapse navbar-collapse"
             id="bs-example-navbar-collapse-9">
            <ul class="nav navbar-nav">
                <li  ><a href="${pageContext.request.contextPath}/room/list.do">客房管理</a></li>
                <li ><a href="${pageContext.request.contextPath}/order/list.do">订单管理</a></li>
                <li ><a href="${pageContext.request.contextPath}/customer/list.do">客户管理</a></li>
                <li ><a href="${pageContext.request.contextPath}/user/list.do">员工管理</a></li>
                <li ><a href="${pageContext.request.contextPath}/behind/Mouth.jsp">月营业额统计</a></li>
                <li class="active"><a href="${pageContext.request.contextPath}/behind/Year.jsp">年营业额统计</a></li>
            </ul>
            <p class="navbar-text navbar-right">
                <span>${username}</span> <i class="glyphicon glyphicon-log-in" aria-hidden="true"></i>&nbsp;&nbsp;
                <a href="${pageContext.request.contextPath}/exit.do" class="navbar-link">退出</a>
            </p>
        </div>
    </div>
</nav>
<div class="jumbotron" style="padding-top: 15px;padding-bottom: 15px;">
    <div class="container">
        <h2>2020年营业额统计折线图</h2>
    </div>
</div>


<div id="main" style="width: 1200px;height:600px;"></div>

</body>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {


        // backgroundColor:'#2c343c',
        textStyle: {
            // color: 'rgba(255, 255, 255, 0.3)',
            fontWeight : 'bold',
            fontSize :'20',
        },

        title: {
            text: '营业额/元'
        },
        tooltip: {
            trigger: 'axis'
        },

        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['第一月', '第二月', '第三月', '第四月', '第五月', '第六月', '第七月', '第八月', '第九月', '第十月', '第十一月', '第十二月']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [50020, 30090, 28500, 58000, 120300, 80000, 50000,90000,100000,250000,190500,200000],
            type: 'line',
            areaStyle: {}
        }]


    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</html>
